<template>
  <div class="shared-advertisement">
    <el-carousel trigger="click" arrow="always" @change="handleCarouselChange">
      <el-carousel-item v-for="item in items" :key="item.id">
        <AdvertisementItem
          :parentId="item.parentId"
          :id="item.id"
          :title="item.title"
          :linkText="item.linkText"
          :imageSrc="item.imageSrc"
          :infoTitle="item.infoTitle"
          :downText="item.downText"
          :subTitle="item.subTitle"
          :speaker="item.speaker"
          :index="item.index"
          :cuccpExamList="item.cuccpExamList"
          @onlineClassListening="onlineClassListening"
          @image-load="onImageLoad"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import AdvertisementItem from './AdvertisementItem.vue';
const emit = defineEmits(['image-load', 'change', 'onlineClassListening']);
const { items } = defineProps({
  items: {
    type: Array,
    required: true,
  },
  index: {
    type: [String, Number],
    required: true,
  },
});

const onImageLoad = () => {
  // 通知父组件图片已加载
  emit('image-load');
};

const handleCarouselChange = async () => {
  await nextTick();
  // 在轮播图切换时重新计算高度
  emit('change');
};

// 接受子组件传递过来的点击事件，然后再传递给父组件
const onlineClassListening = (id, index) => {
  emit('onlineClassListening', id, index);
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
